import {isElementType, getRowTargetElement, createElement} from '../utils/element'
import imgT from '../../assets/images/t.svg'
import imgH1 from '../../assets/images/h1.svg'
import imgH2 from '../../assets/images/h2.svg'
import imgH3 from '../../assets/images/h3.svg'
import imgH4 from '../../assets/images/h4.svg'
import imgH5 from '../../assets/images/h5.svg'
import imgH6 from '../../assets/images/h6.svg'

// 表格最小宽度
const MIN_WIDTH = 200;
const INTERNAL_FLAT = 'text';
/** Img元素的处理 */
class Cat2DocText {
    static ELEMENT_TAG_NAMES = [Node.TEXT_NODE, 'SPAN', 'I', 'EM', 'STRONG', 'B'];
    /** 初始化表格元素 */
    static initElement(e, options) {
        let eles = Cat2DocText.#getTargetElement(e);
        eles.forEach(ele=>{
            // 设置元素宽高到原生属性，因为转换doc文档时，已原生属性为准
            ele.setAttribute('width', Math.max(ele.offsetWidth, MIN_WIDTH));
            ele.setAttribute('height', ele.offsetHeight);
        });
    }
    /** 释放表格元素 */
    static destoryElement(e, options) {

    }
    /** 是否是图片元素 */
    static isType(ele) {
        return Cat2DocText.ELEMENT_TAG_NAMES.find(type=>isElementType(ele, type)!==undefined);
    }
    static #getTargetElement(e) {
        let eles = [];
        Cat2DocText.ELEMENT_TAG_NAMES.forEach(type=>{
            let es = getRowTargetElement(e, type);
            if(es && es.length>0) {
                eles = [...eles, ...es];
            }
        });
        return eles;
    }
    /** 设置元素显示的格式 */
    static #setElementFormat(srcElementId, destTypeName) {
        const p = document.getElementById(srcElementId);
        let content = '';
        p.childNodes.forEach(c=>{
            if(Cat2DocText.isType(c)) {
                content+=c.textContent;
            }
        })
        const id = p.getAttribute('id');
        const newP = createElement('p', null, {});
        newP.innerHTML = `<${destTypeName}>${content}</${destTypeName}>`;
        newP.setAttribute('id', id);
        p.parentNode.insertBefore(newP,p);
        p.remove();
    }
    static getTools(targetEle) {
        const id = targetEle.getAttribute('id');
        return {
            buttons:[{
                targetElementId: id,
                url: imgT,
                className: 'c2d-tools-button',
                group: INTERNAL_FLAT,
                events: {

                },
                popover: {
                    rows: [{
                        buttons:[{
                            targetElementId: id,
                            url: imgT,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'span');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH1,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h1');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH2,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h2');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH3,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h3');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH4,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h4');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH5,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h5');
                                }
                            }
                        },{
                            targetElementId: id,
                            url: imgH6,
                            className: 'c2d-tools-button',
                            events: {
                                click: function (event, options) {
                                    Cat2DocText.#setElementFormat(options.targetElementId, 'h6');
                                }
                            }
                        }]
                    }]
                }
            }]
        }
    }
}

export default Cat2DocText;
